<template>
  <UniPopup
    ref="actionSheetRef"
    :z-index="zIndex"
    :background-color="backgroundColor"
    :borderRadius="title ? borderRadius : ''"
    @change="change"
  >
    <view v-if="title" class="h-48 disFlxCC fz-16 popup-title">
      <text>{{ title }}</text>
    </view>
    <view class="actionSheet-list">
      <template v-for="(v, i) in itemList" :key="i">
        <slot :item="v" :index="i">
          <view
            v-if="getShow(v.show)"
            class="actionSheet-item py-16 disFlxCC"
            :class="{'actionSheet-disabled': v.disabled}"
            @click.stop="itemClick(i, v.disabled)"
          >
            <button
              v-if="v.openType"
              class="open-button"
              :open-type="v.openType"
              @getphonenumber="handleOpenButtonClick($event, i, v.disabled)"
              @getuserinfo="handleOpenButtonClick($event, i, v.disabled)"
              @contact="handleOpenButtonClick($event, i, v.disabled)"
              @getrealtimephonenumber="handleOpenButtonClick($event, i, v.disabled)"
              @opensetting="handleOpenButtonClick($event, i, v.disabled)"
              @chooseavatar="handleOpenButtonClick($event, i, v.disabled)"
            ></button>
            <view class="disFlxAC gap-4">
              <text v-if="v.icon" :class="v.icon"></text>
              <text>{{ v.text }}</text>
            </view>
            <text v-if="v.des" class="fz-12 mt-4" style="color: #969799">{{ v.des }}</text>
          </view>
        </slot>
      </template>
    </view>
    <view class="actionSheet-division"></view>
    <view class="actionSheet-item pt-16" :class="{ 'pb-16': !isNewIphone() }" @click="cancel">
      取消
    </view>
  </UniPopup>
</template>

<script setup lang="ts">
  import UniPopup from '@/uni_modules/uni-popup/components/uni-popup/uni-popup.vue';
  import { propTypes } from '@/utils/propTypes';
  import { type PropType, ref, unref, watch } from 'vue';
  import { isBoolean } from 'lodash-es';
  import { isNewIphone } from '@/utils/is';

  export interface ActionSheetItem {
    icon?: string;
    text: string;
    des?: string;
    value?: string | number;
    show?: boolean;
    disabled?: boolean;
    openType?: JSX.IntrinsicElements['button']['openType'];
  }

  const actionSheetRef = ref<UniPopupRef>();

  const props = defineProps({
    modelValue: propTypes.bool.def(false),
    backgroundColor: propTypes.string.def('#fff'),
    title: propTypes.string.def(''),
    itemList: Array as PropType<ActionSheetItem[]>,
    zIndex: propTypes.number.def(999),
  });

  const emit = defineEmits(['update:modelValue', 'change', 'openButtonClick']);

  const borderRadius = ref('32rpx 32rpx 0px 0px');

  watch(
    () => props.modelValue,
    (val) => (val ? open() : close()),
  );

  const open = () => unref(actionSheetRef)?.open('bottom');

  const close = () => unref(actionSheetRef)?.close();

  const change: UniPopupRef['change'] = (event) => !event.show && cancel();

  const cancel = () => emit('update:modelValue', false);

  const getShow = (show?: boolean) => (isBoolean(show) ? show : true);

  const itemClick = (index: number, disabled?: boolean) => {
    if (isBoolean(disabled) && disabled) return;
    emit('change', index);
    cancel();
  };

  function handleOpenButtonClick(event: any, index: number, disabled?: boolean) {
    if (isBoolean(disabled) && disabled) return;
    emit('openButtonClick', { index, event });
  }
</script>

<style lang="scss" scoped>
  .actionSheet {
    .popup-title {
      color: #292928;
      background-color: #fff;
    }
    &-item {
      text-align: center;
      font-size: 32rpx;
      color: #333333;
      position: relative;
      .open-button {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
      }
      &:not(:last-child) {
        border-bottom: 4rpx #f5f5f5 solid;
      }
    }

    &-division {
      height: 20rpx;
      background: #f5f5f5;
    }
    &-disabled {
      // background-color: #dddddd;
      color: #aaabab;
    }
  }
</style>
